<template>
	<view>
		<view class="listBox">
			<view class="list" v-for="(item) in list" :key="index">
				<view class="Lcont">
					<u-row>
						<u-col span="4">
							<u--image width="180rpx" height="180rpx" :src="item.modelPicUrl" radius="10"
								shape="square"></u--image>
						</u-col>
						<u-col span="8">
							<view class="conts">
								<u-row justify="space-between" gutter="10">
									<u-col span="9"><u--text :lines="1" :text="item.shortUrl"></u--text></u-col>
									<u-col span="3"><u--text @click="copy(item.shortUrl)" type="primary"
											text="复制"></u--text></u-col>
								</u-row>
							</view>
							<view class="conts">
								<u-row justify="space-between">
									<u-col span="8">{{item.createTime | formatDate('-')}}</u-col>
									<u-col span="4" v-if="item.type==1">7天</u-col>
									<u-col span="4" v-if="item.type==2">30天</u-col>
									<u-col span="4" v-if="item.type==3">永久</u-col>
								</u-row>
							</view>
							<view class="conts">
								<u-row justify="space-between">
									<u-col span="6"><u--text type="primary" @click="delbtn(item.id)"
											text="取消分享"></u--text></u-col>
									<u-col span="6"><u--text type="primary" @click="showModal(item)"
											text="查看二维码"></u--text></u-col>
								</u-row>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="modalName == 'Image' ? 'show' : ''" @tap="hideModal">
			<view class="cu-dialog" v-if="goods && erweimapath && haibaoShow" @tap="hideModal">
				<view class="bg-img">
					<cc-poster @success="posterSuccess" :imgSrc="erweimapath" :QrSrc="erweimapath" :TxSrc="avatar"
						:Title="goods.itemtitle" :Nickname="goods.nickname" :PriceTxt="goods.itemendprice"
						:OriginalTxt="goods.itemprice" :LineType="false"></cc-poster>
					<!-- 自定义生成海报组件 -->
					<!-- @success：成功事件  imgSrc：图片地址 QrSrc：二维码图片地址  Title：标题 PriceTxt：价格 OriginalTxt：原始价格 LineType -->
					<!-- <cc-poster @success="posterSuccess" :imgSrc="goods.itempic" :QrSrc="erweimapath" :TxSrc="avatar"
						:Title="goods.itemtitle" :Nickname="goods.nickname" :PriceTxt="goods.itemendprice"
						:OriginalTxt="goods.itemprice" :LineType="false"></cc-poster> -->
				</view>
			</view>
		</view>
		<view class="nullBox" v-if="list.length==0">
			<image src="../../static/null.png" mode="widthFix"></image>
			<view>暂无数据</view>
		</view>
	</view>
</template>

<script>
	// https://ext.dcloud.net.cn/plugin?id=13840   二位欸吗海报文档地址
	export default {
		data() {
			return {
				pageNo: '',
				list: [],
				haibaoImg: null,
				modalName: '',
				haibaoShow: false,
				avatar: 'https://phantombody.oss-cn-shanghai.aliyuncs.com/Role/Picture/role_default_0.jpg',
				erweimapath: undefined,

				goods: {
					"itemid": "2nNozWXiotnRwxGUakBuXUD-0npyN5GSNmYDb0pgTxw",
					"itemtitle": "",
					"itemshorttitle": "",
					"itemdesc": "",
					"itemprice": "39.90",
					"todaysale": "3",
					"itempic": "https://phantombody.oss-cn-shanghai.aliyuncs.com/Role/Picture/2308.png",
					"itemendprice": "29.91",
					"avatar": "https://phantombody.oss-cn-shanghai.aliyuncs.com/Role/Picture/2308.png",
					"nickname": "https://phantombody.oss-cn-shanghai.aliyuncs.com/Role/Picture/2308.png",

				}
			}
		},
		filters: {
			// 时间戳处理
			formatDate: function(value, spe = '/') {
				// value = value * 1000
				let data = new Date(value);
				console.log('value', value)
				let year = data.getFullYear();
				let month = data.getMonth() + 1;
				let day = data.getDate();
				let h = data.getHours();
				let mm = data.getMinutes();
				let s = data.getSeconds();
				month = month > 10 ? month : "0" + month;
				day = day > 10 ? day : "0" + day;
				h = h > 10 ? h : "0" + h;
				mm = mm > 10 ? mm : "0" + mm;
				s = s > 10 ? s : "0" + s;
				return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`;
			}
		},

		onShow() {
			this.list = [];
			this.pageNo = 1;
			this.API_user();
			this.API_Order();
		},
		methods: {
			copy(url) {
				uni.setClipboardData({
					data: url,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				});
			},
			API_user() {
				var that = this;
				that.ran
					.request('/app-api/member/user/get', {}, 'GET')
					.then(res => {
						console.log(res);
						if (res.code == 200) {
							that.goods.avatar = res.data.avatar;
							if (res.data.avatar) {
								that.avatar = res.data.avatar
							} else {
								that.avatar =
									'https://phantombody.oss-cn-shanghai.aliyuncs.com/Role/Picture/role_default_0.jpg'
							}
							that.goods.nickname = res.data.nickname;
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					});
			},
			posterSuccess(haibaoImg) {
				this.haibaoImg = haibaoImg;
				this.modalName = 'Image';
			},
			showModal(item) {
				if (!this.haibaoImg) {
					this.haibaoShow = true;

					uni.showLoading({
						title: '海报生成中...'
					});

					this.erweimapath = "https://api.huanti3d.com/app-api/system/user-share-qr/get?content=" + item
						.shortUrl
					this.goods.itempic = item.modelPicUrl
					console.log('this.erweimapath', this.erweimapath)
				} else {
					this.modalName = 'Image';
				}
			},
			hideModal() {
				this.modalName = null;
			},
			delbtn(id) {
				var that = this;
				that.ran
					.request('/app-api/system/user-share-url/delete?id=' + id, {
						id: id
					}, 'DELETE')
					.then(res => {
						console.log(res);
						if (res.code == 200) {
							uni.showToast({
								title: '取消分享成功',
								icon: 'none'
							});
							this.list = [];
							this.pageNo = 1;
							this.API_Order();
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					});
			},
			API_Order() {
				var that = this;
				var pageNo = that.pageNo;
				that.ran
					.request('/app-api/system/user-share-url/page?pageNo=' + pageNo + '&pageSize=10', {}, 'GET')
					.then(res => {
						console.log(res);
						if (res.code == 200) {
							if (res.data.list == '') {

							} else {
								that.list = that.list.concat(res.data.list);
								that.pageNo = that.pageNo + 1;
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #f8f8f8;
	}

	.nullBox {
		image {
			width: 260rpx;
			display: block;
			margin: 100rpx auto;
		}

		text-align: center;
		color: #666;
	}

	.cu-modal {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1110;
		opacity: 0;
		outline: 0;
		text-align: center;
		-ms-transform: scale(1.185);
		transform: scale(1.185);
		backface-visibility: hidden;
		perspective: 2000upx;
		background: rgba(0, 0, 0, 0.6);
		transition: all 0.3s ease-in-out 0s;
		pointer-events: none;
	}

	.cu-modal::before {
		content: "\200B";
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}

	.cu-modal.show {
		opacity: 1;
		transition-duration: 0.3s;
		-ms-transform: scale(1);
		transform: scale(1);
		overflow-x: hidden;
		overflow-y: auto;
		pointer-events: auto;
	}

	.cu-dialog {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		margin-left: auto;
		margin-right: auto;
		// width: 680upx;
		max-width: 100%;
		background-color: #f8f8f8;
		border-radius: 10upx;
		overflow: hidden;
	}

	.listBox {
		.list {
			// padding: 0 20rpx;
			margin: 25rpx 25rpx 0;
			border-radius: 10rpx;
			background: #fff;
			overflow: hidden;

			.Lcont {
				padding: 20rpx;
				line-height: 60rpx;
				font-size: 26rpx;

				.title {}

				.conts {
					color: #666;
				}
			}

			.Ltop {
				background-image: linear-gradient(to bottom right, #e5e5e5, #f4f4f4);
				line-height: 60rpx;
				padding: 0 20rpx;

				.s1 {
					color: #302C29;
				}

				.s2 {
					color: #0055ff;
				}

				.stutic {
					font-size: 24rpx;
					text-align: right;
				}

				.no {
					font-size: 24rpx;
					font-weight: bold;
				}
			}
		}
	}

	.tab {
		text-align: center;
		line-height: 80rpx;
		border-bottom: 1rpx solid #eee;
	}

	.tabck {
		color: #302C29;
		font-weight: bold;
		// border-bottom: 4rpx solid #302C29 !important;
		position: relative;
	}

	.tabck::after {
		content: ''; // 必须
		position: absolute;
		left: -50rpx;
		margin-left: 50%;
		bottom: 0;
		right: 0;
		width: 100rpx;
		height: 4px;
		border-radius: 10rpx;
		background-color: #302C29;
	}
</style>